<template>
	<view class="perMsg">
		<view class="content">
			<!-- 轮播图 -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :autoplay="autoplay"  :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in swiperList">
						<view class="swiper-item">
							<image :src="swiperList[index]" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 用户详情 -->
			<view class="name">
				<view class="userImg user">
					{{list.name}}
					<img src="../../static/img/male.png" alt="" v-if="list.gender==true">
					<img src="../../static/img/female.png" alt="" v-if="list.gender==false">
				</view>
			</view>
			<view class="loveMsg">
				<view class="msg">
					<u-tag text="爱的宣言" borderColor="#fff" plain type="error" icon="tags-fill"></u-tag>
				</view>
				<view class="txt">
					{{list.personality}}
				</view>
			</view>
		</view>
		<view class="baseMsg">
			<view class="msg">
				<u-tag text="基本资料" borderColor="#fff" plain type="error" icon="tags-fill"></u-tag>
			</view>
			<view class="tag" v-if="list.gender==false">
				<u-tag shape="circle" :text="`${list.age}岁`" plain plainFill />
				<u-tag shape="circle" :text="`${list.height}cm`" plain plainFill />
				<u-tag shape="circle" :text="`${list.weight}kg`" plain plainFill />
				<u-tag shape="circle" :text="`${list.nation}`" plain plainFill />
				<u-tag shape="circle" :text="`${list.education}`" plain plainFill />
				<u-tag shape="circle" :text="`${list.occupation}`" plain plainFill />
				<u-tag shape="circle" :text="`${list.isDivorced}`?'无婚史':'有婚史'" plain plainFill />
				<u-tag shape="circle" :text="`${list.isOnlyChild==0?'非独生子':'独生子'}`" plain plainFill />
			</view>
			<view class="tag" v-if="list.gender==true">
				<u-tag shape="circle" :text="`${list.age}岁`" plain plainFill />
				<u-tag shape="circle" :text="`${list.height}cm`" plain plainFill />
				<u-tag shape="circle" :text="`${list.weight}kg`" plain plainFill />
				<u-tag shape="circle" :text="`${list.nation}`" plain plainFill />
				<u-tag shape="circle" :text="`${list.education}`" plain plainFill />
				<u-tag shape="circle" :text="`${list.occupation}`" plain plainFill />
				<u-tag shape="circle" :text="`${list.isDivorced}`?'无婚史':'有婚史'" plain plainFill />
				<u-tag shape="circle" :text="`${list.isOnlyChild==0?'非独生子':'独生子'}`" plain plainFill />
			</view>
		</view>
		<view class="addMsg">
			<view class="msg">
				<u-tag text="加分资料" plain borderColor="#fff" type="error" icon="tags-fill"></u-tag>
			</view>
			<view class="tag" v-if="list.gender==false">
				<u-tag shape="circle" size="large" :text="`${list.income}W/年`" plain plainFill />
				<u-tag shape="circle" :text="`${list.hasCar}`?'有车':'没车'" plain plainFill />
				<u-tag shape="circle" :text="`${list.hasHouse}`?'有房':'没房'" plain plainFill />
			</view>
			<view class="tag" v-if="list.gender==true">			
				<u-tag shape="circle" :text="`${list.hasCar}`?'有车':'没车'" plain plainFill />
				<u-tag shape="circle" :text="`${list.hasHouse}`?'有房':'没房'" plain plainFill />
				<u-tag shape="circle" :text="`${list.income}W/年`" plain plainFill />
			</view>
		</view>
		<view class="heartMsg">
			<view class="msg">
				<u-tag text="现居" plain borderColor="#fff" type="error" icon="tags-fill"></u-tag>
			</view>
			<view class="txt">
				{{list.currentAddress}}
			</view>
			<view class="msg">
				<u-tag text="祖籍" plain borderColor="#fff" type="error" icon="tags-fill"></u-tag>
			</view>
			<view class="txt">
				{{list.baseAddress}}
			</view>
			<view class="msg">
				<u-tag text="taの理想型" borderColor="#fff" plain type="error" icon="tags-fill"></u-tag>
			</view>
			<view class="txt">
				{{list.idealType}}
			</view>

			<view class="msg">
				<u-tag text="朋友眼中的我" borderColor="#fff" plain type="error" icon="tags-fill"></u-tag>
			</view>
			<view class="txt">
				{{list.friendEvaluation}}
			</view>
		</view>
		<view>
			<uni-notice-bar show-icon text="月老牵线=> 大鸣WX: 021-8008208820" />
		</view>
	</view>
</template>

<script>
	import {
		getUserImg
	} from '../../network/home.js'
	import {only_child} from "../../constant/enum.js"
	export default {
		data() {
			return {
				autoplay: true,
				interval: 3000,
				duration: 500,
				list: [],
				only_child:{},
				userId: null,
				isAvatar: null,
				// 轮播图初始值
				swiperList: [],
			}
		},
		methods: {
			async getImg() {
				let data = {
					userId: this.userId,
					isAvatar: false
				}
				let res = await getUserImg(data)
				let list = []
				if (res.data.length!=0) {
					res.data.forEach((item)=>{
						list.push(`https://dogji.vip/${item.photoPath}`)
					})
					this.swiperList=list
				}else{
					this.swiperList=['https://dogji.vip/cloud/image/null.jpg']
				}
				console.log(this.swiperList);
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.list = JSON.parse(option.msg)
			this.userId = this.list.id
			this.getImg()
		}
	}
</script>

<style scoped lang="scss">
	.perMsg {
		background-color: #e6e6e6;

		.content {
			.img {
				width: 100%;
				height: 200px;
				overflow: hidden;

				img {
					width: 100%;
					height: 300px;
				}
			}

			.name {
				font-size: 40rpx;
				font-weight: 700;
				margin: 20rpx 0;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10px;
				}
			}
		}

		.baseMsg {
			padding: 20rpx;
			margin: 20rpx 0;
			background-color: #fff;
			border-radius: 10rpx;

			.tag {
				font-size: 30rpx;
				display: grid;
				grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
				grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
				.u-tag{
					display: flex;
					justify-content: center;
					width: auto;
					
				}
			}
		}

		.addMsg {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx 0;

			.tag {
				font-size: 30rpx;
				display: grid;
				grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
				grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
				.u-tag{
					
				}
			}
		}

		.heartMsg {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx 0;

			.txt {
				font-size: 30rpx;
			}
		}

		.loveMsg {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx 0;

			.txt {
				font-size: 30rpx;
			}
		}

		.msg {
			font-size: 40rpx;
			margin-bottom: 20rpx;
			width: 300rpx;
			margin-left: -30rpx;
		}

		#text {
			padding-top: -20px;
		}

		.uni-section-header {
			padding: 0;
		}
		.user img{
			width: 40rpx;
			height: 40rpx;
		}
		/* 轮播图 */
		.uni-margin-wrap {
			width: 690rpx;
			width: 100%;
		}
		
		.swiper {
			height: 300rpx;
		}
		
		.swiper-item {
			display: block;
			height: 400rpx;
			line-height: 400rpx;
			text-align: center;
		}
		
		image {
			width: 100%;
			height: 100%;
		}

	}
</style>
